<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="language" content="zh-CN">
    <meta name="title" content="程序员晨光">
    <meta name="github" content="https://mp.weixin.qq.com/s/yHPIPa_MdC5fWPDaExyUBg">
    <meta name="describe" content="欢迎点赞分享 ">

    <title>💗 老爸👨我爱你 💗</title>

    <link rel="stylesheet" href="./style/main.css">
    <style type="text/css">
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background: rgb(4, 4, 22);
        }

        #contents {
            color: pink;
            font-size: 2em;
            text-align: center;
            width: 100%;
            height: 100px;
            text-transform: none;
        }
        .type_words{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;color:#f1dadb;padding:20px;text-transform:lowercase;}
    </style>
</head>

<body onclick="bodyPlayMusic()">

    <div class="type_words" id="contents">爸爸👨辛苦了<br>父亲节快乐🎉</div>
    <canvas id="pinkboard" width="1707" height="868"></canvas>
    <canvas id="heart" width="1000" height="600"></canvas>
        loop="loop"></audio>
    <script>
        var shouci = true;
        console.log(shouci);
        function bodyPlayMusic() {
            if (shouci) {
                shouci = false;
                audio.play();
                console.log(shouci);
            }
        };
    </script> 
    <script src="./js/lxheart.js"></script>
    <script src="./js/filltext.js"></script>
    <script>
        // 修改文字 想要多几个飘着的文字
        var texts = ['爸爸', '节日快乐', '❤️'];
        // '#ff30c5' '#ea80b0'
        // 第二个参数不传 默认爱心颜色 #ea80b0
        renderLxHeart(document.getElementById('heart'), '#ec9bad');
        fillText(document.getElementById('pinkboard'), texts)
    </script>
</body>

</html>